<template>
	<div v-loading="loading">
		<el-form ref="formRef" :model="formData" label-width="120px">
			<el-card shadow="never" class="!border-none">
				<el-form-item label="发送方式：" prop="send_type">
					<el-select class="w-[120px]" v-model="formData.send_type">
						<el-option label="请选择" value="" />
						<el-option label="SMTP" value="SMTP" />
					</el-select>
				</el-form-item>
				<el-form-item label="域名：" prop="host">
					<div class="w-80">
						<el-input v-model.trim="formData.host" placeholder="请输入域名" />
					</div>
				</el-form-item>
				<el-form-item label="端口：" prop="port">
					<div class="w-80">
						<el-input v-model.trim="formData.port" placeholder="请输入端口" />
					</div>
				</el-form-item>
				<el-form-item label="账号：" prop="user_name">
					<div class="w-80">
						<el-input v-model.trim="formData.user_name" placeholder="请输入账号" />
					</div>
				</el-form-item>
				<el-form-item label="密码：" prop="password">
					<div class="w-80">
						<el-input v-model.trim="formData.password" placeholder="请输入密码" />
					</div>
				</el-form-item>
				<el-form-item label="安全协议：" prop="secure_type">
					<el-select class="w-[120px]" v-model="formData.secure_type">
						<el-option label="默认" value="" />
						<el-option label="TSL" value="tsl" />
						<el-option label="SSL" value="ssl" />
					</el-select>
				</el-form-item>
				<el-form-item label="发件人邮箱：" prop="form_address">
					<div class="w-80">
						<el-input v-model.trim="formData.form_address" placeholder="请输入发件人邮箱" />
					</div>
				</el-form-item>
				<el-form-item label="发件人姓名：" prop="form_address">
					<div class="w-80">
						<el-input v-model.trim="formData.form_name" placeholder="请输入发件人姓名" />
					</div>
				</el-form-item>
			</el-card>
		</el-form>
		<footerSubmit>
			<el-button v-auth="'setting/setMailInfo'" type="primary" @click="handleSubmit">保存</el-button>
		</footerSubmit>
	</div>
</template>

<script lang="ts" setup name="systemMail">
import { ref, reactive, onMounted } from 'vue';
import { getMailInfo, setMailInfo } from '/@/api/setting/webset';
import { messageSuccess } from '/@/utils/message';

const formRef = ref(null);

const loading = ref(true);

// 表单数据
const formData = reactive({
	send_type: 'SMTP',
	host: '', // 域名
	port: '', // 端口
	user_name: '', // 账号
	password: '', // 密码
	secure_type: '', // 安全协议
	form_address: '', // 发件人邮箱
	form_name: '', // 发件人姓名
});

// 获取数据
const getData = async () => {
	const data = await getMailInfo();
	for (const key in formData) {
		if (data[key] != null && data[key] != undefined) {
			formData[key] = data[key];
		}
	}
	loading.value = false;
};

// 保存提交
const handleSubmit = async () => {
	await formRef.value?.validate();
	await setMailInfo(formData);
	messageSuccess('设置成功');
	getData();
};

onMounted(() => {
	getData();
});
</script>
